.sidebar-container {
    background-color: $menuBg;
    width: $sideBarWidth;
    transition: width .28s;
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    //控制台
    .sideBar-title {
        box-sizing: border-box;
        height: $tagHeight;
        border-bottom: 1px solid rgba(107, 114, 117, 0.33);
        color: #fff;
        position: relative;
        display: flex;
        align-items: center;
        &-info {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 3px;
            width: 100%;
            padding-left: 66px;
            overflow: hidden;
            white-space: nowrap;
            opacity: 1;
            transition: 0.1s;
        }
        &-icon {
            position: absolute;
            cursor: pointer;
            right: 16px;
            font-size: 20px;
        }
    }
    //菜单
    .el-menu {
        border: none;
        width: 100%;
        height: 100%;
    }
    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
        &:hover {
            background-color: $menuHover !important;
        }
    }

    .is-active>.el-submenu__title {
        color: $subMenuActiveText !important;
    }

    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
        min-width: $sideBarWidth !important;
        background-color: $subMenuBg !important;

        &:hover {
            background-color: $subMenuHover !important;
        }
    }
}
//隐藏
.hideSideBar {
    .submenu-title-noDropdown {
        padding: 0 !important;
        position: relative;
        .el-tooltip {
            padding: 0 !important;

            .svg-icon {
                margin-left: 20px;
            }
        }
    }
    .el-submenu {
        overflow: hidden;
        &>.el-submenu__title {
            padding: 0 !important;
            .svg-icon {
                margin-left: 20px;
            }
            .el-submenu__icon-arrow {
                display: none;
            }
        }
    }
    .el-menu--collapse {
        .el-submenu {
            &>.el-submenu__title {
                &>span {
                    height: 0;
                    width: 0;
                    overflow: hidden;
                    visibility: hidden;
                    display: inline-block;
                }
            }
        }
    }
}
// when menu collapsed
.el-menu--vertical {
    &>.el-menu {
        .svg-icon {
            margin-right: 16px;
        }
    }
    .nest-menu .el-submenu>.el-submenu__title,
    .el-menu-item {
        &:hover {
            // you can use $subMenuHover
            background-color: $menuHover !important;
        }
    }
    // the scroll bar appears when the subMenu is too long
    >.el-menu--popup {
        max-height: 100vh;
        overflow-y: auto;

        // &::-webkit-scrollbar-track-piece {
        //     background: #d3dce6;
        // }

        // &::-webkit-scrollbar {
        //     width: 6px;
        // }

        // &::-webkit-scrollbar-thumb {
        //     background: #99a9bf;
        //     border-radius: 20px;
        // }
    }
}
